<template>
  <div class="home">
        <button @click="fun"  type="button" >点击查看最新笑话</button>
        <div class="msgclass" v-for="item in msg">
            <p class="p">{{item}}</p>
        </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            msg:'',
            item:'',
        }
    },
    created(){
            this.fun()
        },
    methods:{
          fun:function () {
              const _this = this
              console.log("执行方法")
              this.$axios.get('https://autumnfish.cn/api/joke/list?num=6').then( //发送请求的函数
                  function(resp){
                      _this.msg = resp.data.jokes
                      console.log(_this.msg)
                  })
          }
    },

}
</script>
<style>
    .home{
    height:1000px
    }
    .msgclass{
    background:#f2eada;
    width:60%;
    margin-left:20%
    }
    .p{
    margin-left:0;
    text-align: left;
    }
</style>
